<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="<%=HTTP_ROOT%>/css/bootstrap.css">
    <style media="screen">
    .my-panel {width:80%; position:absolute; z-index:100; left:50%; top:100px; margin-left:-40%; display:none;}
    .my-panel-shadow {width:100%; height:100%; position:fixed; left:0; top:0; background:#000; opacity:0.6; z-index:99; display:none;}

    .my-dialog {width:300px; position:absolute; z-index:100; left:50%; top:200px; margin-left:-150px; display:none;}
    .my-dialog-shadow {width:100%; height:100%; position:fixed; left:0; top:0; background:#000; opacity:0.3; z-index:99; display:none;}
    </style>
  </head>
  <body>
    <ul class="nav nav-tabs">
      <% for(let type in page_types) {%>
        <li 
          role="presentation" 
          <% if(type === page_type) {%>
            class="active"
          <%}%>
        >
          <a href="<%=HTTP_ROOT%>/admin/<%=type%>"><%=page_types[type]%></a>
        </li>
      <% }%>
   
    </ul>

      <!--表格-->
      <a href="#" class="btn btn-primary glyphicon glyphicon-plus" id="btn_add">添加</a>
      <table class="table">
        <!-- 标题部分 -->
        <thead>
          <tr>
            <th>ID</th>
            <%fields.forEach(field => {%>
            <th><%=field.title%></th>
            <%})%>
            <th></th>
          </tr>
        </thead>
        <!-- 主体信息部分 -->
        <tbody>
          <% datas.forEach(data => {%>
          <tr>
            <td><%=data.ID %></td>
            
            <%fields.forEach(field => {%>
              <% if(field.type === 'textarea') { %>
                <td><%= data[field.name].slice(0,20) + '...'%></td>
              <%} else {%>
              <td><%=data[field.name] %></td>
              <%}%>
            <%})%>

            <td>
              <a href="<%=HTTP_ROOT%>/admin/<%=page_type%>/delete/<%=data.ID%>"     class="btn btn-danger glyphicon glyphicon-trash"
              onclick="return confirm('确认删除吗？')"
              >删除</a>

              <a data-id="<%=data.ID%>" class="btn btn-modify btn-default glyphicon glyphicon-pencil">修改</a>
            </td>
          </tr>
          <% })%>
        </tbody>
      </table>

 

    <!--添加-->
    <div class="my-panel-shadow"></div>
    <div class="panel panel-default my-panel">
      <div class="panel-heading">
        <div class="panel-title">
          添加
        </div>
      </div>
      <div class="panel-body">
        <form class="form form-horizontal" action="<%=HTTP_ROOT%>/admin/<%=page_type%>" method="post" enctype="multipart/form-data">

          <%fields.forEach(field => {%>
            <div class="form-group">
              <label class="col-sm-2 control-label"><%=field.title%></label>
              <div class="col-sm-10">

                <%if(field.type === 'textarea'){%>
                  <textarea class="form-control" name="<%=field.name%>" 
                  placeholder="<%=field.title%>"></textarea>
                <%}else if(field.type === 'select'){%>
                  <select class="form-control" name="<%=field.name%>" id="">
                    <% field.items.forEach(item => { %>
                      <option value="<%=item.ID%>"><%=item.title%></option>
                    <% })%>
                  </select>
                <% } else { %>
                    <input 
                    type="<%=field.type%>" 

                    name="<%=field.name%>" 
                    class="form-control" 
                    placeholder="<%=field.title%>"
                  >
                <%}%>
              </div>
            </div>
          <%})%>
          
          <!-- 提交按钮 -->
          <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
              <button type="submit" class="btn-primary form-control">提交</button>
            </div>
          </div>

        </form>
      </div>
    </div>

    <!--对话框-->
    <div class="my-dialog-shadow"></div>
    <div class="panel panel-default my-dialog">
      <div class="panel-heading">
        <div class="panel-title">
          标题
        </div>
      </div>
      <div class="panel-body">
        内容
      </div>
      <div class="panel-footer">
        <div class="btn-group">
          <button type="button" class="btn btn-default btn-sm">按钮1</button>
          <button type="button" class="btn btn-default btn-sm">按钮2</button>
        </div>
      </div>
    </div>

  </body>
  <script src="<%=HTTP_ROOT%>/js/jquery.min.js" charset="utf-8"></script>
  <script>

    // 配置共信息
    const HTTP_ROOT = '<%=HTTP_ROOT%>';
    const page_typs = '<%=page_type%>';

    // 缺补零零函数
    function toDon(n){
      return n < 10 ? '0' + n : n;
    }

    // 点击增加弹出的模态框
    $('#btn_add').click(function(){
      $('.my-panel-shadow, .my-panel').show();
    })

    // 点击修改
    $('.btn-modify').click(async function(){
      let id = this.dataset.id;
      let url = `${HTTP_ROOT}/admin/${page_typs}/get/${id}`

      let data = await $.ajax({
        url,
        dataType:'json'
      })

      if(data.err){
        alert('not find this data~')
      } else {
        let value = data.data;
        // 显示信息框
        $('.my-panel-shadow, .my-panel').show();
        // 修改文本显示
        $('.my-panel .panel-title').text('修改');
        $('.my-panel form').prop('action', `${HTTP_ROOT}/admin/${page_typs}/modify/${id}`);

        $('.form-group input, .form-group textarea, .form-group select').each(function(index, item){
          if(typeof value[item.name]) {
            // 因为文件控件是不能直接赋值，所以这边加一个try
            try{
              if(this.type === 'date') { // 针对日期的赋值
                let dateObj = new Date(value[item.name] * 1000)
                item.value = `${dateObj.getFullYear()}-${toDon(dateObj.getMonth() + 1)}-${toDon(dateObj.getDate())}`

              } else {
                item.value = value[item.name]
              }
            }catch(e){
              console.log('一个文本框赋值失败：', item)
            }
          }
        })
      }

    })
  </script>
</html>
